<template>
  <div class="app">
    <HeaderHeader></HeaderHeader>
    <NavigatingBar @funcSwitch="funcSwitch"></NavigatingBar>
    <MainMain v-show="func === '0'" @funcSwitch="funcSwitch"></MainMain>
    <FuncGroup1 ref="func1Ref" v-show="func === '1'" @funcSwitch="funcSwitch"></FuncGroup1>
    <FuncGroup2 v-show="func === '2'" @funcSwitch="funcSwitch"></FuncGroup2>
    <FuncGroup3 v-show="func === '3'" @funcSwitch="funcSwitch"></FuncGroup3>
    <!-- Group4 5 ... -->
    <FooterFooter></FooterFooter>
  </div>
</template>
<script>
import HeaderHeader from './components/HeaderHeader.vue'
import MainMain from './components/MainMain.vue'
import NavigatingBar from './components/NavigatingBar.vue';
import FuncGroup1 from './components/FuncGroup1.vue';
import FuncGroup2 from './components/FuncGroup2.vue';
import FuncGroup3 from './components/FuncGroup3.vue';
import FooterFooter from './components/FooterFooter.vue';
export default {
  components: {
    //'组件名'：组件对象
    HeaderHeader, MainMain, NavigatingBar, FuncGroup1, FuncGroup2, FuncGroup3,
    FooterFooter,
  },
  data() {
    return {
      func: '0',
    }
  },
  methods: {
    funcSwitch(n) {

      

      console.log(n)
      this.func = n
      this.$refs.func1Ref.clear();
      //console.log("func:"+this.func)      
    }

  }
}
</script>
<style>
.app {
  background-image: linear-gradient(to right, transparent, #4285F4, #4285F4);
  margin: auto;
  user-select: none;
}

.funcgroup {
  background-color: #cecece;
  ;
  margin-bottom: 20px;
  height: 1000px;
}
</style>